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> Understand scripting for HTML 
> Create a script 

> Debug a script 

» Understand objects 

> Use JavaScript event handlers 
> Create a function 

ic Assign a variable 

> Create a conditional 


HTML allows you to create basic Web pages easily. Using many of the 
newest features available in Web page design, however, requires the 
incorporation of scripts, which are programs in a Web page that run 
on the viewer’s browser. Using scripts can expand the number of fea- 
tures you can add to your Web pages and can simplify some HTML 
commands. f» Lydia Burgos works in the information systems 
division of Nomad Ltd. Her supervisor heard about the advantages of 
scripts at a recent seminar and has asked Lydia to create a report on 
ways that scripts could enhance the company’s current Web publica- 
tion. Lydia begins by researching the fundamentals of scripting, which 
is the process of writing scripts. 


Understanding 
am. | Scripting for HTML 


A script is a small program contained within an HTML document that can be executed by a 
Web browser. In the early days of the Web, scripts were separate files stored and run on a remote 
Web server. Today, Web page designers can place scripts within a page’s standard HTML, and the 
scripts can run on each user’s computer. This change is made possible by new techniques for 
data transfer on the Web as well as a new generation of more powerful home computers. Other 
forms of Web page programming (such as CGI files that process data from Web page forms) 
may also be referred to as scripts. However, scripts that run on a user’s browser represent the 
most powerful and innovative form of scripting on the Web today. This is the definition we will 
use in this book. Figure H-1 shows the source code for a Web page containing a script, as well 
as the Web page generated by that code. Qf» In researching scripting fundamentals, Lydia 
Burgos has learned that using scripting in Web page development offers several advantages over 
using HTML alone. These advantages include the following: 


Flexibility 

Scripting allows you to modify your Web pages in ways that are not yet part of standard HTML. 
Additionally, you can combine scripting codes in many different ways, which opens the door to 
more variety and creativity in your pages than with HTML alone. For example, you can have a 
message that runs automatically when the Web page is opened and that is updated automati- 
cally, such as a current list of top headlines for a news Web site. 


e*) Simplification 

You can script some tasks that you usually would code using HTML. In many cases, scripting is 
more efficient and allows you to create a more organized publication. One of the first areas in 
which scripting is replacing HTML is in assigning styles to text. Instead of adding attributes to 
the tags for each block of text in your publication, you can insert a small script that automati- 
cally assigns specific attributes, such as boldface type or text color, to specific blocks of text 
throughout an entire Web page or set of pages. 


E 


g>) Immediate response 

Traditionally, to access many features available on a Web page, your browser contacts the Web 
site where the page resides and requests a linked Web page or new information based on your 
input. Embedded scripts eliminate the lag time involved in contacting the remote server, wait- 
ing for a response, and downloading new information. This is because the scripts run on your 
local computer and can change what your browser displays without downloading new infor- 
mation from the server. 


GA 
í, 


e*) Improved interactivity 

The quick response time that local scripting provides allows you to incorporate an impressive 
amount of user interactivity into your Web pages. Since script processing occurs locally, your 
script can react almost instantaneously to any user action. For example, your script could dis- 
play a short summary of a link when the user simply moves the pointer over the link without 
clicking it. 


CG 


g**) Reduced server load 

Local execution of scripts is an advantage not just for users, but for Web site administrators as 
well. The reduced demand on the server when some of the processing is shifted to local com- 
puters results in more free system resources. This may result in a decrease in download time for 
people viewing your site’s pages and faster processing when a Web page does need to submit a 
request to the server. 


GA 
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generated 
by script 


FIGURE H-1: Web page script source code and browser document 


<HTML> 


<HEAD> 
<TITLE>Nomad Ltd online</TITLE> 


<SCRIPT LANGUAGE="javascript"> 

<!-- 

var name=prompt ("For personal service, please type your first name and click 
OK.", ) 


function submitted(}) { 
alert ("Information submitted!") 


} 


function clearUp({) { 
document .info.elements [0] .value="" 
document .info.elements [1] .value="" 
document .info.elements [2] .value="" 
document .info.elements [3] .value="" 
document .info.elements [4] .value="" 
document .info.elements [5] .value="" 


} 


//--> 
</SCRIPT> 


a : o JScript, which a are dot “daplations o o N 
i ooo m programming language, a as s well as sb b 


Welcome to the Nomad Ltd Nomad ita 


home page, Lydia! 
Learn About Our|Company's Philosophy 


Nomad Ltd is a national sporting goods retailer 
dedicated to delivering high-quality sporting gear and 
adventure travel. 

Nomad Ltd has been in business for over ten years. 
During that time, we have offered tours all over the 
world and sold sporting equipment for bicycling, hiking, 
and other activities. Like most companies, our main goal 
is to make a profit. At the same time, we realize that as a 
business, we are also community members. Nomad Ltd 
is committed to contributing to community efforts and 
making each town where we do business a better place 
to live. We do that by hiring from the community, 
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When saving a file as HTML, 
be sure to select Text (.txt) 
as the file type to be saved 
and include the extension 
-htm in the filename. 


All browsers ignore the 
remainder of the line after 
the <!-- tag; thus, some 
script writers add a normal 


such as “HIDE,” to make the 
script code easier for 
programmers to look at 

and understand. 


If the Web page does not 
display correctly, or if a 
dialog box opens describing 
an error in your script, click 
OK if necessary, read the 
next lesson to learn about 
debugging scripts, then 
return to look for errors in 
your Web page code. 


3. 


a 4. 


language comment here, 5. 


a> °. 


ci) Creating a Script 


You can add a script to a Web page just as you would add to or edit the Web page’s HTML code. 
HTML To do this, you can use a text editor such as WordPad or Notepad or a Web page editor such as 
a FrontPage Express or Composer. In order for a browser to recognize a script, the script must be 
contained within <SCRIPT> HTML tags. It is also good practice to surround each script with a 
set of HTML tags to make it invisible to browsers incompatible with scripts. This second set of 
HTML tags tells incompatible browsers to bypass the script. @jfqgm= While researching script- 
ing fundamentals, Lydia found a sample script that validates a form before submitting it to a 
server by checking the form to be sure information has been entered in each field. If informa- 
tion has not been entered in each field and the user tries to send the form, then this form vali- 
dation script displays a warning box which reminds the user to complete each field. Lydia 
decides to try adding this script to the Nomad Ltd home page in order to better understand how 
to insert scripts into HTML code. 


> |. 


Start your text editor program, open the file HTML H-1.htm, then save it as a text doc- 


ument with the filename Scripted page.htm 

If you use WordPad or Notepad, which are text editors built into Windows 95, the source 
code for the Web page appears as text in the text editor. If you use an HTML editing tool, 
such as Microsoft FrontPage or Netscape Composer, you will see the graphical representa- 
tion of the file code. You must select the option Page Source or HTML from the View menu 
to see the HTML code for the page. 


. select the text [replace with opening script tags] below the TITLE tag, then press 


[Delete] 


Type <SCRIPT LANGUAGE="javascript"> and press [Enter] 
Now the beginning of the script is marked with the <SCRIPT> HTML tag and an attribute 
specifying the scripting language you're using, which is JavaScript. 


Type <!-- and press [Enter] twice 

The tag <!-- tells an incompatible browser (one that can’t process your script) to ignore the 
code that follows. A compatible browser (one that can interpret your script) will go ahead 
and process the script that follows. 


Select the text [replace with closing script tags], then press [Delete] 


6. Type //--> and press [Enter], then type </SCRIPT> and press [Enter] 


These tags mark the end of the script. Figure H-2 shows the Web page source code contain- 
ing the opening and closing script tags and the dialog box generated by the script. 


. Check the lines you added for errors, make changes as necessary, then save Scripted 


page.htm as a text document 


Start your Web browser program, cancel any dial-up activities, open the page 
Scripted page.htm, scroll down to the text fields near the bottom of the page, fill in 


sample information, then click the Send now! button 
The script runs and displays the dialog box shown in Figure H-2. 


9. Click the OK button 


The browser simulates form submission to a server. This script will save time for people using 
the Nomad Ltd Web page, since they do not have to wait for the form to be submitted to the 
server and then wait for an error message to be transmitted back to their computer. 


FIGURE H-2: Source code for Web page dialog box 
<HTML> 


<HEAD> 
<TITLE>Nomad Ltd online</TITLE> 


<SCRIPT LANGUAGE="javascript"> 
<!-- 
function submitted({) { 
alert ("Information submitted!") 


Opening 
script tags 


{--> 


Closing </SCRIPT> 


script tags 


</HEAD> 

<BODY BACKGROUND="egg shell.jpg"> 

<IMG SRC="nomad.jpg" ALIGN="right" WIDTH=201 HEIGHT=63> 
<Hl>Nomad Ltd Home Page!</H1> 


<H2>Learn About Our Company's Philosophy</H2> 


<DIV ID=text> 
Nomad Ltd has t J ypes UI Nomad Lours 


time, we have c 


+ Athlete: For those who are sports participants. 
e Arts: Dedicated to enjoying and appreciating the performing arts. 
e Leisure: Designed to let you relax and rejuvenate. 


Tell Us More About EEE Saal] 
N Information submitted! 
First Name Lydia 


Script-generated 

dialog box Street Address:[733 Baker Street 
City: [Springfield State: 
Click here to submit this information. _ Send now! | 
Contact Us Directly! 


Find out more about what we have to offer. Contact the tour office at 
Tourdirector@nomadltd.com 


Debugging a Script 

No matter how carefully scripting code is entered, a script often contains errors, or bugs, the 
first time your browser processes it. In general, a bug causes the script to return unexpected and 
undesired results. These may include improper text formatting, the display of HTML or 
JavaScript code in the browser window, or, in the worst case, requiring you to exit and restart 
the browser. It’s doubtful that simple errors you make entering the scripts in this book could 
hang your browser. However, when your results are different than those shown in this text, you 
can use a process called debugging to systematically identify and fix your script’s bugs. fpe» 
Lydia reads up on debugging scripts and learns about several main culprits that cause undesired 
results. These are illustrated in Figure H-3. 


QuickTip 
You can type HTML 
tags and property 


capital or lowercase 
without affecting the 
browser's interpreta- 
tion. Only scripting 


HTML—are case- 


Capitalization 

JavaScript is a case-sensitive language, meaning that it treats capital and lowercase versions of 
the same letter as different characters. Thus, depending on the script being entered, capitalizing 
or not capitalizing letters can result in errors. Always check that you have used capital letters 
where called for and that all the capital letters in your script are correct. 


Spacing 

When entering script code from a printed source, it is easy to add extra spaces or to leave spaces 
out. Some parts of JavaScript syntax allow for extra spaces, which makes code easier to view and 
understand. However, as in HTML, incorrect spacing in certain parts of a script can render 
otherwise-perfect code incomprehensible to the browser. The best way to avoid spacing errors 
is to pay careful attention to spacing while you enter code. 


Parentheses ( ), brackets [ ], braces { }, and quotes 
JavaScript often uses these four types of symbols to enclose arguments, values, or numbers 
upon which certain commands are executed. In more complex scripts, you may end up with 
several sets enclosing other sets, which makes it easy to forget to type one or more closing sym- 
bols. In lines or blocks of script where these symbols are concentrated, it can be difficult to 
check for accuracy. However, to ensure that your script will run properly, you must make sure 
that each one is paired with its counterpart. 


Typographical errors (0 vs. O, 1 vs. I) 

Another common source of errors when entering code from printed material is interchanging 
characters that appear similar, such as the number 0 and the letter O. Generally, the context pro- 
vides good clues to figuring this out. For example, even if you don’t know the function of the 
expression “value=0", the use of the word value gives you a good clue to type a number rather 
than a letter. Ultimately, the best way to avoid confusing these symbols is to analyze what the 
script is doing in the current line. Once you understand this, it should be obvious which char- 
acter to type. 


Others 

Inevitably, various other sources of error will creep into your scripts. To help you deal with mis- 
cellaneous problems, as well as those detailed earlier, JavaScript-compatible browsers often dis- 
play a JavaScript Error window, as shown in Figure H-4, when they can’t interpret your code. 
Generally, the window describes the type of error the browser encountered and the error’s loca- 
tion, referenced by its line number in the script. With this information, some investigation of 
your code, and a bit of thought, you can track down and fix most any bug that crops up. 


Now that you understand the basics of working with scripts, you can begin to learn how to con- 
struct your own scripts. 


FIGURE H-3: JavaScript containing common bugs 


<HTML> 
<HEAD> 
<TITLE>Nomad Ltd online</TITLE> Letter 
— P ` m" 7 
ale LANGUAGE="Javascript"> instead of 
Unclosed function submit() {} number 
parentheses 


verify() { 


Incorrect if (document.info.elements [6] -value == "" || 
capital oN _document. info elenents 1] -value ss mm. f 
Document .info.elements [2] .value == "" |] 
I] 
| 


document .info.elements [3] .value == "" 
document. _info.elements [4].value == "" 


nt.info.elements [5].value == "" { 
Extra space alert ("Please complete each field") 
} else { 
submit (} 


} 

ff--> 
</SCRIPT> 
</HEAD> 


<BODY BACKGROUND="egg shell.jpg"> 


FIGURE H-4: JavaScript Error window 


Description of 
error 


Erroneous code Location of 
with error error in code 
indicated 
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Understanding 
am | Objects 


In order to organize and work with the various parts of the browser window, including the cur- 
rent Web page and each of its elements, JavaScript treats each element in the window as a unit 
called an object. JavaScript gives each object a default name and set of descriptive features based 
on its location and function. These features include properties, which are qualities such as size, 
location, and type. In a Web page containing a graphic, the IMG tag would be an object, and the 
WIDTH setting would be one of its properties. Each object also has associated methods, which 
are actions the object can carry out. For example, each frame in a browser window has an asso- 
ciated ALERT method, which allows you to create customized dialog boxes. JavaScript organizes 
objects in an object hierarchy, much like the system of folders used by Windows to keep track 
of disk contents. f= As Lydia researches the object hierarchy, she learns different ways to 
refer to the various elements in a document when writing a script. 

To specify an object on a Web page, you need to detail its position in the hierarchy, beginning on 
the document level and then separating each level name with a period. This method of referenc- 
ing objects in the hierarchy is called dot syntax. For example, to specify an image on a Web page, 
the name would begin document.images. Because a document can contain more than one image, 
each image is assigned a number, based on the order in which it appears in the Web page code. 
Other elements such as anchors, hyperlinks, and forms also are assigned numbers. It is important 
to note, however, that in JavaScript, this numbering begins with 0. Thus, when writing a script that 
refers to the first image in your HTML code, you would use the name document.images[0]. The 
second image in your HTML code would be called document.images[1] according to the object 
hierarchy. To specify an element such as a button or a text field contained inside a form you would 
use a slightly longer address. For example document.forms[0].elements[0] would refer to the first 
element created in the first form in a Web document. 


GAS) You also use dot syntax to refer to an objects methods. For example, the code 
document.write(“Copyright Course Technology, 1999.”) calls on the write method of the document 
object. This code causes the information in parenthesis to be written to the document. Table H-1 
lists the default objects that are part of every browser window, along with their methods. 


TABLE H-1: Default JavaScript objects and methods 


object name | method name | description 


window alert(message) Displays a dialog box with a message in the window 


close() Closes the window 


prompt(message, default_text) Displays a dialog box prompting the user for information 


scroll(x, y) Scrolls to the x.y coordinate in the window 


alert(message) o Displays a dialog box with a message in the frame 


location Reloads the current page 


‘document ‘Writes text and HTML tags to the current document 


submit() Submits the form 
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Be sure you use two 
apostrophes, rather than a 
quotation mark, following 
onMouseOut= “window. 
status=. 


If your message does not 
appear correctly, check to be 


script exactly as shown in 
Step 3. 


1. 


D <. 


T 6. 


sure you have typed the 1. 


D) Using JavaScript 
am | Event Handlers 


In order for your Web pages to interact with users, your scripts must be able to recognize and 
respond to user actions. Each action by a user is known as an event. JavaScript can respond to 
a user’s actions with event handlers, which are terms that specify possible user actions. By 
including an event handler along with a set of instructions, your script can respond to certain 
user actions when they happen. Table H-2 lists 12 event handlers and describes the event that 
each one names. @fæ= Lydia has read about using event handlers. She wants the Nomad Ltd 
home page to display a message in the status bar window when a user moves the pointer over 
the e-mail address. She recognizes that this pointer positioning is an event, and that she can use 
a script containing an event handler to display the message. 


Open HTML H-2.htm in your text editor and save it as a text document with the file- 


name Event handler.htm 
Lydia wants to insert her script code in the <A> code near the bottom of the page. 


. Scroll to the end of the document, select the text [insert event handler here] in the 


<A> tag, then press [Delete] 


Type the following all on the same line, without pressing [Enter]: 
onMouseOver="window.status='We will reply to your inquiry within 24 


hours!';return true" onMouseOut="window.status=";return true" 

The completed script is shown in Figure H-5. Even without pressing Enter, your text editor 
may wrap the text onto multiple lines. This will not affect the accuracy of your code. The 
window.status object refers to the status bar. In this script, the onMouseOver event handler 
instructs the browser to display the text typed between the apostrophes in the status bar 
when the pointer is over the hypertext link. In this script, the onMouseOut event handler 
instructs the browser to clear the text—that is, to display nothing in the status bar—when 
the mouse pointer is moved off the hypertext link. The text is cleared as indicated by the 
apostrophes containing no text or spaces that follow the second window.status. 


. Check the document for errors, make changes as necessary, then save Event han- 


dler.htm as a text document 


. Open the file Event handler.htm in your Web browser, then scroll to the bottom of 


the page 


Notice that the status bar contains information about the loading status of the current Web page. 


Move the mouse pointer over the link Tourdirector@nomadltd.com, but do not click 
The scripted message appears in the status bar, as shown in Figure H-6. 


Move the mouse pointer off the link 
The message no longer appears in the status bar. 


FIGURE H-5: Completed script containing new event handlers 


<H2>Tell Us More About Yourself !</H2> 

<FORM NAME="info"> 

First Name:<INPUT TYPE="TEXT" SIZE=20 NAME="firstname"> 

Last Name: <INPUT TYPE="TEXT" SIZE=20 NAME="lastname"><BR> 
Street Address:<INPUT TYPE="TEXT" SIZE=50 NAME="address"><BR> 
City: <INPUT TYPE="TEXT" SIZE=20 NAME="city"> 

State:<INPUT TYPE="TEXT" SIZE=6 NAME="state"> 

Zip Code:<INPUT TYPE="TEXT" SIZE=15 NAME="zipcode"> 

<BR>Click here to submit this information. <INPUT TYPE="BUTTON" VALUE="Send 
now!" onClick="submitted (}) "> 

</FORM> 


<H2>Contact Us Directly!</H2> 


Find out more about what we have to offer. Contact the tour 
office at <A HREF="MAILTO: Tourdirector@nomadltd.com" 

onMouseover="window.status='We will reply to your inquiry within 24 
Event rane — i 


code entered 


hours!";return true" onMouseOut="window.status="";return 
true">Tourdirector@nomadltd.com</A> 


</BODY> 
</HTML> 


FIGURE H-6: Browser displaying status bar message 
Types Of Nomad Tours 
. Athlete: For those whe are sports participants. 


e Arts: Dedicated to enjoying and appreciating the performing arts. 
e Leisure: Designed to let you relax and rejuvenate. 


Tell Us More About Yourself! 
First Name: ‘Last Name: | | 


Street Address: 


Event handler 


activated by City: l State] Zip Code! =a 
position of ick here to submit this information. . 
pointer ae 

ContactUs Directly! | 
Message in Find out more about we have to offer. Contact the tour office at 
status bar director@nomadlt 


triggered by 
event handler 


TABLE H-2: JavaScript event handlers 


event handler | triggering action event handler | triggering action 
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ci) Creating a Function 


As your scripts become more complex, you will begin to incorporate many lines of code in each 
HTML one to store and process information. To help keep your scripts organized, JavaScript allows you 
a to group and name sets of script code in units called functions. A function is a set of code that 
performs a specific task. When you group the lines of your scripts into functions, the code is log- 
ically broken down into functional units, which makes it easier to understand and to debug. You 
usually define functions in a page’s head section, which allows any programmer to quickly scan 
a page’s code. Additionally, because each function has a name, you can easily refer to it in sev- 
eral different parts of a Web page. This means you do not need to duplicate code each time you 
want your page to repeat a procedure. @fæ= Lydia wants to add a button to the Web page that 
will clear the user’s input in the form. She writes a function to perform this task. 


1. Open the file HTML H-3.htm in your text editor, then save it as a text document with 


the filename Function.htm 
Generally, it’s best to define functions at the beginning of a Web page, to make sure they are 
available for all subsequent uses. 


2. Select the text [replace with clearUp function] in the page’s head section, then 
press [Delete] 
3. Type the following, pressing [Enter] at the end of each line 
function clearUp() { 
document.info.elements[0].value="" 
document.info.elements[1].value="" 
document.info.elements[2].value="" 
document.info.elements[3].value="" 
document.info.elements[4].value="" 


document.info.elements[5].value="" 
These lines define a function that assigns the value null, or nothing, to each of the six text 
fields on the page. This null value is defined with the paired quotation marks that follow 
each equal sign and that contain nothing between them. 


4. Type } 


Figure H-7 shows the completed function, including the opening and closing braces. The 
code for a function is always demarcated with braces {}. 


5. Scroll to the end of the document, select the text [replace with Clear button codel, 
then press [Delete] 
6. Type <INPUT TYPE="BUTTON" value="Clear form" onClick = "clearUp()"> 


The button tag includes an event handler to trigger, or call, the function clearUp() when a 
user clicks the button. Figure H-8 shows the completed button tag in the document. 


7. Check the document for errors, make changes as necessary, then save Function.htm 
as a text document 


8. Open Function.htm in your Web browser, fill in the six input fields, then click the 


Clear form button 
The browser clears each of the text input fields. 


FIGURE H-7: Document containing clearUp() function code 


<HTML> 


<HEAD> 
<TITLE>Nomad Ltd online</TITLE> 


<SCRIPT LANGUAGE="jJavascript"> 
<!-- 
function submitted({) { 
alert ("Information submitted!")} 


} 


unction clearUp{) { 
document .info.elements [0] .value="" 
document .info-.elements [1] .value="" 
Code document .info.elements [2] .value="" 
document .info.elements [3] .value="" 


defining document .info.elements [4] .value="" 
new f document .info.elements [5] .value="" 
function } 

ff--> 

</SCRIPT> 

</HEAD> 


FIGURE H-8: Document containing clearUp() function reference 


</UL> 


<H2>Tell Us More About Yourself!</H2> 
<FORM NAME="info"> 

First Name:<INPUT TYPE="TEXT" SIZE=20 ID="firstname"> 

Last Name: <INPUT TYPE="TEXT" SIZE=20 ID="lastname"><BR> 

Street Address:<INPUT TYPE="TEXT" SIZE=50 ID="address"><BR> 

city: <INPUT TYPE="TEXT" SIZE=20 ID="city"> 

State:<INPUT TYPE="TEXT" SIZE=6 ID="state"> 

Zip Code:<INPUT TYPE="TEXT" SIZE=15 ID="zipcode"> 

<BR>Click here to submit this information. <INPUT TYPE="BUTTON" VALUE="Send 
now!" onClick="submitted (} "> 

<BR>Click here to clear the form and start over. 

<INPUT TYPE="BUTTON" VALUE="Clear form" JonClick="clearuUp (}) "> 
</FORM> 


<H2>Contact Us Directly!</H2> 


Find out more about what we have to offer. Contact the tour Code 
office at <A HREF="MAILTO: Tourdirector@nomadltd.com" referencing 
onMouseover="window.status="We will reply to your inquiry within 24 

hours !';return true" onMouseout="window.status='';return new 
true">Tourdirector@nomadltd.com</A> function 
</BODY> 

</HTML> 
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(i) Assigning a Variable 


In scripting, you often instruct JavaScript to perform functions on pieces of information that you 
HTML specify, known as values. For example, the text We will reply to your inquiry within 24 hours!, which 
a you used earlier in conjunction with an event handler, is a value. Values can also include “true” and 
“false” and information about the user’s browser, such as the width of the window in pixels. 
JavaScript can add or manipulate any numeric value mathematically. When values are composed 
of many characters, such as the message text above, or when they change in different situations, 
such as browser window dimensions, they can be cumbersome if you need to enter them several 
times in your script. You can make this process easier and more efficient by assigning the value to 
a variable, which serves as a nickname. When you assign a value to a variable, you enter or look 
up the value only one time and then you use the variable to refer to the value. Using variables saves 
you time when writing scripts. Variables provide added flexibility by allowing you to modify the 
value in only one place and have the modifications reflected instantaneously throughout the doc- 
ument as indicated by the variable. @jfqgam= Lydia has modified the Nomad Ltd home page to per- 
sonalize text by displaying the user’s name. To finish her changes, she needs to define the variable 
she will use to represent the user’s name, and then insert the variable name in the scripts. 


1. Open the file HTML H-4.htm in your text editor, then save it as a text document with 
the filename Variable.htm 


2. Select the text [replace with variable definition] near the top of the page, then press 
[Delete] 


3. Type the following text on one line, without pressing [Enter] 

var name=prompt("For personal service, please type your first name and click 
OK u" m') 

This line of script creates a dialog box that prompts the user to enter his or her first name 
and assigns the user’s input to a variable named “name”. Figure H-9 shows the document 
with this line of code inserted. The command “var” tells JavaScript that you are specifying a 
variable. The word following var—in this case, “name”—is the name of the variable you are 
creating. The value of the new variable follows the name after an equals sign. In this case, 
the value will be the result of user input in a dialog box created by the “prompt” method. 


4. Scroll down to the beginning of the page’s body section, select the text [replace with 
heading script], then press [Delete] 


Notice that Lydia has already inserted the opening and closing script tags. 


5. Type the following text on one line, without pressing [Enter] 
Be sure you type a space document.write("<H1>Welcome to the Nomad Ltd home page, " + name + "!</H1>") 
after the text page, and This script writes a line of code to the Web page, containing H1 tags to format the text. Lydia 


before the closing °. uses the variable “name” to insert the user’s name into the page heading. 


6. Scroll down to the beginning of the form section, select the text [replace with sec- 
ond heading script], then press [Delete] 

7. Type the following all on one line, without pressing [Enter] 
document.write("<H2>Please tell us more about yourself, " + name + ".</H2>") 
This script places the user’s name at a second location in the Web page. 

8. Check the document for errors, make changes as necessary, then save Variable.htm 
as a text document 


9. Open the file Variable.htm in your Web browser, type your first name in the prompt 
dialog box, then click OK 


The Nomad Ltd home page is now personalized. The name the user enters in the prompt 
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dialog box is displayed. See Figure H-10. 


FIGURE H-9: Script creating a variable 


<HTML> 


<HEAD> 
<TITLE>Nomad Ltd online</TITLE> 


<SCRIPT LANGUAGE="jJavascript"> 


<=- 
i var name=prompt ("For personal service, please type your first name and click 
Variable OKL", "") 
inserted in 
script function submitted() { 


alert ("Information submitted!") 


} 


function clearUp(} { 
document .info.elements [0] .value="" 
document .info.elements [1] .value="" 


document .info.elements [2] .value="" 
document .info.elements [3] .value="" 
document .info.elements [4] .value="" 
document .info.elements [5].value="" 


} 


/f--> 
</SCRIPT> 


FIGURE H-10: Web page incorporating user information 


Welcome to the Nomad Ltd Nomad.ttd 


home page, Lydia! 


Learn About Our Company's Philosophy 


Nomad Ltd has been in business for over ten years. During that time, we have offered tours to User name 
exotic (and simple) lands and sold sporting equipment (for bicycling, hiking, and other incorporated 
activities). In all that time, we have always been aware that our employees are our corporate into Web 


ambassadors, and our customers are our royalty. We know that any company can make a buck page text 
here and there, but we want to do more than that. We want you to enjoy shopping at our stores 

and contribute to making Nomad a fun and interesting place to shop. We also know that as a generated by 
business, we are also community members. Nomad wants to contribute to community efforts and script 

make each town we're in a better place to live and shop. How do we do that? By hiring from the 

community, offering educational and financial benefits to our employees, and becoming 


involved in various community efforts. 
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ci) Creating a 
Hm. | Conditional 


Sometimes, you want a script to be able to create different results depending on different user 
actions or on the value of a certain browser attribute. JavaScript allows you to set up this situa- 
tion by creating a conditional in your script. A conditional allows your script to choose one of 
two paths, depending on a condition that you specify. For example, you might want a graphic to 
display at a smaller size if a user’s window is not maximized, to keep it fully in view. You could 
use a conditional to check the dimensions of the user’s browser window and then set the graphic 
dimensions to one of two preset choices. Conditionals allow you to create flexible, interactive 
scripts whose output can change in different situations. @fiæ» Nomad Ltd has had a problem 
with users submitting forms missing the zip code information. Lydia wants her Web page to ver- 
ify that the user has completed the zip code form field before it submits the data to the server. 
Using a conditional, her page can prompt the user to complete the field if it is left blank. 


1. Open the file HTML H-5.htm in your text editor, then save it as a text document with 
the filename Conditional.htm 


2. Select [replace with verify function] in the page’s head section and press [Delete] 


3. Type the following code, pressing [Enter] at the end of each line 
function verify() { 


if (document.info.elements[5].value == "") { 
alert("Please complete each field.") 
} else { 
submitted() 
} 


} 


Figure H-11 shows the document containing the verify function. The “if” statement code 
checks if the value of the zipcode field is null, indicating that the user has left it blank. When 
the “if” statement returns a value of “true,” the function executes the code that immediately 
follows it. Here, the “true” result triggers the “alert” command to create a dialog box prompt- 
ing the user to complete each field. When the “if” statement returns a value of “false,” the 
function executes the code following the word else. In Lydia’s script, the else command runs 
a function called “submitted()” that sends the user’s information to the Web server. 


4. Scroll to the bottom of the form section, select the text [replace with event handler] 
in the tag for the Send now! button, then press [Delete] 


5. Type onClick="verify()" 


6. Check scripts you added for errors, make changes as necessary, then save 
Conditional.htm as a text document 


7. Open Conditional.htm in your Web browser, enter your name, scroll down to the form, 


then click the Send now! button without filling in any of the fields 
The script runs and displays the dialog box shown in Figure H-12. 


8. Click the OK button, then fill in each of the fields with sample information and click 


the Send now! button 
The script you added verifies that the zip code field contains information and then allows 
the form submit function to execute. 


FIGURE H-11: Web document containing completed script 


document.info.elements [5] .value="" 


function verify () 


if ‘(document.info.elements[5].value == "") { 
Je eee complete each field.") 
E 1 
Conditional else | 


submitted í} 
terms 


</HEAD> 
“false” 
result <BODY BACKGROUND="egg shell.jpg"> 


“true” 
result 


<IMG SRC="nomad.jpg" ALIGN="right" WIDTH=201 HEIGHT=63> 


<SCRIPT LANGUAGE="javascript"> 

<l-- 

document .write ("<H1l>Welcome to the Nomad Ltd home page, " + name + "!</H1>")} 
/f--> 

</SCRIPT> 


FIGURE H-12: Browser showing alert dialog box 


e Athlete: For those who are sports participants. 
e Arts: Dedicated to enjoying and appreciating the performing arts. 
e Leisure: Designed to let you relax and rejuvenate. 


Please tell us more about vourself. Lvdia. 


Microsoft Internet Explorer 
First Name:| 


AN Please complete each field. 
Street Address: 


City: | State 


Click here to submit this informati 
Click here to clear the form and start over. _ Clear form | 


Contact Us Directly! 


Find out more about what we have to offer. Contact the tour office at 
Tourdirector@nomadltd.com 
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> Concepts Review | 


Label each item shown in Figure H-13. 
FIGURE H-13 2 3 


[PT LANG 


6. Object hierarchy 
7. Event handler 

8. Bug 

9. Method 

10. JavaScript 


a. Term specifying a possible user action 
b. An error in a script 

c. A Web page scripting language 

d. JavaScript’s object organization 

e. Any action an object can carry out 


Practice 


Select the best answer from the list of choices. 


11. What HTML tagset marks the beginning and end of a script? 
a. <JS>..</JS> 
b. <JAVASCRIPT>..</JAVASCRIPT> 
c. <SCRIPT>..</SCRIPT> 
d. <JAVASCRIPT>..<JAVASCRIPT> 
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N 


. Which scripting language is compatible with both Netscape Navigator 4 and Microsoft Internet Explorer 4? 
a. JScript 
b. JavaScript 
c. HTML 
d. VBScript 


1 
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. Which of the following typing mistakes would not result in an error in your script? 
a. Substituting the letter | for the number 1 
b. Inserting an extra space 
c. Omitting a closing bracket 
d. All of the above could result in errors. 


1 
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. What would be the proper form of address in the object hierarchy for the second element in a form called “info”? 
a. document.info.elements[1] 
b. document.info.elements[2] 
c. document.forms.info.elements|2] 
d. info.elements[2] 


1 
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. What is the function of the string <!-- in scripting? 
a. It is the HTML code for the beginning of a script. 
b. It is the HTML code for the end of a script. 
c. It tells an incompatible browser to ignore the code that follows. 
d. It tells the browser to display the text “--” 


1 
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. Which comparison operator returns true only if the values before and after are both true? 
a. && 


b. 
c. l 
d. 


1 
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. A set of script code grouped logically and named is called a(n) 
a. Object. 
b. Variable. 
c. Hierarchy. 
d. Function. 


SCRIPTING FOR HTML HTML H-19- 


HTML | Practice 


B Skills Review 


1. Create a script. 

. Open the text editor, open the file HTML H-6.htm, then save it as a text document with the filename Script 
review.htm. 

b. Select the text [replace with script tags] in the page’s head section, then press [Delete]. 

c. Type <SCRIPT LANGUAGE="javascript"> and press [Enter]. 

d. Type <!-- and press [Enter] twice. 

e 

f 

g 


2 


. Type //--> and press [Enter], then type </SCRIPT>. 
. Save Script review.htm as a text document. 
. Open Script review.htm in your Web browser. 


N 


. Debug a script. 

a. Open the file HTML H-7.htm in your browser, read the description of the error in the JavaScript Error dialog 
box, then click yes. 

b. Open the file HTML H-7.htm in your text editor, then save it as a text document with the filename Debug 
review.htm. 

. Position the pointer in the third line of the clearUp() function, which begins document.info.elements[2].value, 
then insert a second quotation mark (“) after the existing one at the end of the line. 

. Save Debug review.htm as a text document, open Debug review.htm in your Web browser, enter information in 
the form, then click the Clear form button. 
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. Use JavaScript event handlers. 

a. Open the file HTML H-8.htm in your text editor, then save it as a text document with the filename Event 
handler review.htm. 

b. Scroll to the bottom of the document, select the text “[replace with event handler)” in the first <A> tag, then 
press [Delete]. 

c. Type the following without pressing [Enter]: 

onMouseOver="window.status='Guidelines on scheduling vacation time';return true" 

onMouseOut="Wwindow.status="';return true" 

. Review your typing for errors, then save Event handler review.htm as a text document. 

. Open Event handler review.htm in your Web browser, move the mouse pointer over the hypertext link 
“Additional vacation information” and verify that the message “Guidelines on scheduling vacation time” 
appears in the status bar. 

f. If necessary, fix any errors in your text editor, then save and preview the page. 
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. Create a function. 
a. Open the file HTML H-9.htm in your text editor, then save it as a text document with the filename Function 
review.htm. 

. Select the text “[replace with date function]” in the page’s head section, then press [Delete]. 

. Type function writeDate() { 

. Press [Enter], then type document.write(month + "/" + today.getDate() + "/" + today.getYear() + ".") 

. Press [Enter], then type } 
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Practice 


f. Select the text [replace with function call] near the bottom of the page, then type writeDate() 

g. Save Function review.htm as a text document. 

h. Open Function review.htm in your browser, verify that it displays the current date below the list of vacation 
dates, use your text editor to make changes if necessary, then save Function review.htm as a text document. 


Assign a variable. 
a. Open the file HTML H-10.htm in your text editor, then save it as a text document with the filename Variable 
review.htm. 

b. Select the text [replace with variable code] in the page’s head section, then type var name=prompt("Please 
type your first name and click OK",""). 

. Select the text [replace with variable reference] at the top of the body section, then press [Delete]. 

. Type document.write(name). 

. Save Variable review.htm as a text document, then open Variable review.htm in your browser. 
Type your first name, then click OK. 

. Use your text editor to debug as needed. 
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. Create a conditional. 


a. Open the file HTML H-11.htm in your text editor, then save it as a text document with the filename 
Conditional review.htm. 
. Select the text [replace with conditional function] in the page’s head section, then press [Delete]. 
. Type the following code, pressing [Enter] at the end of each line: 
function verify() { 
if (document.info.elements[0].value == "" || 
document.info.elements[1].value == "" Il 
document.into.elements[2].value == "" || 
document.info.elements[3].value == "" Il 
document.info.elements[4].value == "" Il 
document.info.elements[5].value == "") 
alert("Please complete each field.") 
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} else { 
submitted() 
} 
} 
d. Review your code for typing errors, then save Conditional review.htm as a text document. 
e. Open Conditional review.htm in your browser, fill in every field in the form except the last name field, click 


the “Submit now!” button, verify that your browser opens a dialog box asking you to complete all the fields, 
then click OK. 
. Close your text editor and browser. 


— 


HTML | Practice 


B Independent Challenges | 


T. Green House, a local plant store, has hired you to add interactive features to their Web pages. You’ve decided to 

start by using an event handler to display link explanations in the status bar when users point to the page’s links. 

To complete this independent challenge: 

. Start your text editor program, open the file HTML H-12.htm, then save it as a text document with the filename 
Green House home.htm. 

. To define the text strings that will be displayed as variables, select the text [replace with variable script] at the 
top of the page, press [Delete], and insert the following script, pressing [Enter] at the end of each line: 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
var plants="An overview of our plant stock and sources" 
var tips="Helpful growing hints on common houseplants" 
var services="A guide to our professional plant care services" 

/|--> 
</SCRIPT> 

. Select the text “[replace with first event handlers]” in the <A> tag for the first link at the bottom of the page, 
press [Delete], and type the following without pressing [Enter]: 
onMouseOver="window.status=plants;return true'onMouseOut="window.status='';return true" 

. Repeat Step c to modify the second link with the following insertion: 

onMouseOver="window.status=tips;return true" onMouseOut="window.status="';return true" 

Repeat Step c to modify the third link with the following insertion: 

onMouseOver="window.status=services;return true" onMouseQut="window.status="';return true" 

Save Green House home.htm as a text document, then open the file Green House home.htm in your Web browser. 

Use your text editor to make any changes necessary, always save the file as a text document, then close your 

text editor and browser. 
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P. You have designed a Web publication for Sandhills Regional Public Transit. You want to incorporate a function 
you've written to tell prospective riders which fare period is in effect. A sentence stating the fare period will display at 
the bottom of the Web page. This sentence will change depending on the time of day. 

To complete this independent challenge: 

a. Start your text editor program, open the file HTML H-13.htm, then save it as a text document with the filename 
SRPT home.htm. 

b. Replace the text [replace with fare function] in the page’s head section with the script located in the file 
HTML H-14.txt. 

c. Scroll down immediately before the closing body section tag, delete the text [replace with function call script], 
enter the two opening script tags, type “schedTime()” (without the quotes) as the third line of the script, then 
enter the two closing script tags. 

d. Save and preview your file in your Web browser program, debugging as necessary until you see no more 
JavaScript error messages. 


Practice 


J. You have been hired by Community Public School Volunteers to add advanced features to their Web publication 
using scripts. You have inserted a script into the home page they provided, but a JavaScript error dialog box opens 
when the page loads. To complete this independent challenge, preview the file HTML H-15.htm in your browser, not- 
ing the type of JavaScript error described and its location. Open the page in your text editor and save a copy as CPSV 
home.htm. Edit the script to fix the JavaScript error. Use the guidelines listed earlier in the unit to identify the types 
of errors that may be present. Continue to preview and edit the page until you no longer receive an error message, then 
save your work in your text editor as a text file. 


RK 
Y 7 4. Scripts are used in many Web pages on the WWW today to add features, as well as to create inter- 
Pr} “ esting formatting that is not possible with standard HTML coding. To complete this independent chal- 
= . lenge, find two pages on the Web that contain scripts. (Hint: after opening a page in your browser, 
choose the HTML or Page Source option in your browser’s View menu to check the document code for 
<SCRIPT> tags.) Print their HTML source code, and circle all scripts you see on your printouts. Circle 
and label any variables, conditionals, and functions you see in the documents. 


» 
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> Visual Workshop 


Open your text editor program, open the file HTML H-16.htm, and save it as a text document named Touchstone.htm. Then 
open Touchstone.htm in your browser. Scroll down to see the Send now! button. Click the Send now! button on the form 
without entering information in any of the fields. Use the form-verification script located in the file HTML H-17.txt and 
your text editor to modify the document Touchstone.htm. Change the event handler for the Send now! button to run the 
verify() function. Save the changes as a text document with the filename Touchstone.htm. Click the browser program but- 
ton on the taskbar, and refresh your screen. Click the Send now! button again. Your screen should look like Figure H-14. 
Debug as necessary. (Hint: Remember to insert the verification script in the document header section between the beginning 
and ending script tags.) 


FIGURE H-14 


Microsoft Internet Explorer x| 


| : 
AN Please complete each field. 


